<template>
	<div id ="help">
		<el-row class="tac">
          <el-col :span="5">
            <el-card class="box-card" style="overflow:auto" v-bind:style="{height: dynHeight}">
              <div slot="header" class="clearfix">
                <span>{{docName}}</span>
              </div>
              <div>
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="filterText">
                </el-input>
                
                <el-tree
                  class="filter-tree"
                  :data="data2"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  node-key="id"
                  @node-click="showDoc"
                  ref="tree2">
                </el-tree>
              </div>
            </el-card>
          </el-col>
          <el-col :span="19">
            <el-card class="box-card" style="overflow:auto" v-bind:style="{height: dynHeight}">
              <div v-html="docContent" class="markdown-body">
              </div>
            </el-card>
          </el-col>
        </el-row>
	</div>
</template>

<script>
  import '../css/markdown.css'
	export default {
	  	created(){
            //动态设置高度
            this.dynHeight=document.documentElement.clientHeight-90+"px";
            // var showdown  = require('showdown');
            // var converter = new showdown.Converter();
            // this.docContent = converter.makeHtml('```public```');
            var classifyIndex = this.$route.params.classifyIndex;
            var docIndex = this.$route.params.docIndex;
            this.docName = this.$route.params.docName;
            console.log(classifyIndex + "/" + docIndex);

            // 记录当前文档的位置
            this.docPath = classifyIndex + "/" + docIndex;
            
            //初始化加载文档结构和首页
            this.$http.post('http://127.0.0.1:8888/doc/docDetail', 
            {
              "classifyIndex" : classifyIndex,
              "docIndex" : docIndex
            }).then(response => {
              console.log(response);
              this.data2 = JSON.parse(response.body.dirStructure);
              this.docContent = response.body.readmeHtml
            }, response => {
              console.log('失败');
            });

          // 更新文档的浏览次数
          this.updateViewTimes(classifyIndex,docIndex);
      },
	    watch: {
        filterText(val) {
          this.$refs.tree2.filter(val);
        }
      },
	    data() {
	      return {
	        docContent:'',
	        dynHeight: '',
	        filterText: '',
          data2: [],
          docPath: '',
          docName: '',
          defaultProps: {
            children: 'children',
            label: 'label'
          }
	      }
		  },
	    methods: {
	      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },

        /**
         * 展示文档
         */
        showDoc(data) {
          console.log(data.pageFile);
          if(data.pageFile != undefined && data.pageFile != 'undefined'){
            // 加载文档页
            this.$http.post('http://127.0.0.1:8888/doc/docPage', 
            {
              "docDir" : this.docPath,
              "docPageFile" : data.pageFile
            }).then(response => {
              console.log(response);
              this.docContent = response.bodyText;
            }, response => {
              console.log('失败');
            });
          }
        },

        /** 
         * 更新浏览次数
         */
         updateViewTimes(classifyIndex,docIndex) {
          // 更新
          this.$http.post('http://127.0.0.1:8888/doc/updateViewTimes', 
          {
            "classifyIndex" : classifyIndex,
            "docIndex" : docIndex
          }).then(response => {
            console.log(response);
          }, response => {
            console.log('失败');
          });
        }
	    }
	}
</script>

<style>
#document {
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
	font-weight: 400;
}
</style>